<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box"></div>
    <!---------------------- 无数据是显示 ---------------------->
    <!-- <Nodata class="Nodata"></Nodata> -->
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: () => ({}),
    },
  },
  computed: {},
  watch: {
    data: "drawLine",
  },
  data() {
    return {
      temp: 0,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      this.$nextTick(() => {
        try {
          this.temp = 0;
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          /**
           * 照着一个案例改的
           * 增加下面的数值显示
           * */
          var myData = this.data.xData;
          var lineData = [];
          for (let item of this.data.yData2) {
            lineData.push(100);
          }
          // var lineData = [100, 100, 100, 100, 100, 100];
          var lastYearData = {
            1: this.data.yData1,
            2: this.data.yData3,
            3: this.data.yData6,
          };
          var thisYearData = {
            1: this.data.yData2,
            2: this.data.yData4,
            3: this.data.yData5,
          };
          var timeLineData = [1];
          var timeLineData2 = [2];
          var timeLineData3 = [3];
          var option = {
            baseOption: {
              // backgroundColor: background,
              timeline: {
                show: false,
                top: 0,
                data: [],
              },
              legend: {
                top: "3%",
                left: "center",
                itemWidth: 10,
                itemHeight: 6,
                // itemGap: 343,
                // icon: "horizontal",
                textStyle: {
                  color: "#fff",
                  // padding: [0, 0, 0, 6],
                  fontSize: fontSize.fontSize(0.084),
                },
                // padding: [10, 20, 10, 20], //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
                // borderColor: "rgba(85, 150, 188,0.5)", //边框颜色
                // borderWidth: 1, //边框线宽
              },
              grid: [
                {
                  show: false,
                  left: "2%",
                  top: "22%",
                  bottom: "4%",
                  containLabel: true,
                  width: "44%",
                },
                {
                  show: false,
                  left: "51%",
                  top: "22%",
                  bottom: "4%",
                  width: "0%",
                },
                {
                  show: false,
                  right: "2%",
                  top: "22%",
                  bottom: "4%",
                  containLabel: true,
                  width: "44.5%",
                },
              ],
              xAxis: [
                {
                  type: "value",
                  inverse: true,
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  position: "bottom",
                  axisLabel: {
                    show: false,
                    //     formatter:function(value)
                    //   {
                    //         //return '\n\n\n\n' + value;
                    //      // return '\n' + value
                    //      return value
                    //      // return value + 'virus'
                    //     // return value.split("").join("\n");
                    //   },
                    textStyle: {
                      color: "white",
                    },
                  },
                  splitLine: {
                    show: false,
                  },
                },
                {
                  gridIndex: 1,
                  show: false,
                },
                {
                  gridIndex: 2,
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  position: "bottom",
                  axisLabel: {
                    show: false,
                    interval: 0,
                    // formatter:function(value)
                    //   {
                    //         //return '\n\n\n\n' + value;
                    //     //  return '\n' + value
                    //   return value
                    //      // return value + 'virus'
                    //     // return value.split("").join("\n");
                    //   },
                    textStyle: {
                      color: "white",
                    },
                  },
                  splitLine: {
                    show: false,
                  },
                },
              ],
              yAxis: [
                {
                  type: "category",
                  inverse: true,
                  position: "right",
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: false,
                  },
                  data: myData,
                },
                {
                  gridIndex: 1,
                  type: "category",
                  inverse: true,
                  position: "left",
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: true,
                    //  formatter:function(value)
                    //   {

                    //      // return '\n' + value
                    //      return value + '\n\n'
                    //      // return value + 'virus'
                    //   },
                    textStyle: {
                      color: "rgba(6, 247, 249,0.8)",
                      fontSize: fontSize.fontSize(0.058),
                      borderColor: "rgba(6, 247, 249,0.4)", //边框颜色
                      borderWidth: 1, //边框线宽,
                      borderRadius: 3,
                      // borderStyle:"dashed",
                      padding: [3, 3, 2, 3],
                    },
                  },
                  data: myData.map(function (value) {
                    return {
                      value: value,
                      textStyle: {
                        align: "center",
                      },
                    };
                  }),
                },
                {
                  gridIndex: 2,
                  type: "category",
                  inverse: true,
                  position: "left",
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: false,
                  },
                  data: myData,
                },
              ],
              series: [],
            },
            options: [],
          };

          option.baseOption.timeline.data.push(timeLineData[0]);
          option.options.push({
            series: [
              {
                type: "pictorialBar",
                xAxisIndex: 0,
                yAxisIndex: 0,
                // symbol: 'rect',
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                  },
                },
                barWidth: 6,
                // symbolRepeat: true,
                // symbolSize: 14,
                data: lineData,
                barGap: "-100%",
                barCategoryGap: 0,
                label: {
                  normal: {
                    show: true,
                    formatter: (series) => {
                      return (
                        lastYearData[timeLineData[0]][series.dataIndex] +
                        "%" +
                        "  " +
                        lastYearData[timeLineData2[0]][series.dataIndex] +
                        "次  " +
                        lastYearData[timeLineData3[0]][series.dataIndex] +
                        "箱"
                      );
                    },
                    position: "insideRight",
                    textStyle: {
                      color: "#ffffff",
                      fontSize: fontSize.fontSize(0.084),
                    },
                    offset: [0, -fontSize.fontSize(0.1)],
                  },
                },
                z: -100,
                animationEasing: "elasticOut",
                animationDelay: function (dataIndex, params) {
                  return params.index * 30;
                },
              },
              {
                name: "自动(基本)",
                type: "bar",
                xAxisIndex: 0,
                yAxisIndex: 0,
                //  symbol: 'rect',
                barWidth: 6,
                itemStyle: {
                  normal: {
                    barBorderRadius: [5, 0, 0, 5],
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "rgba(88, 240, 207,0.8)" },
                        { offset: 1, color: "rgba(11, 152, 153,0.8)" },
                      ]
                    ),
                  },
                },
                // symbolRepeat: true,
                // symbolSize: 14,
                data: lastYearData[timeLineData[0]],
                // animationEasing: 'elasticOut',
                // animationDelay: function (dataIndex, params) {
                //     return params.index * 30 * 1.1;
                // }
              },
              {
                type: "pictorialBar",
                xAxisIndex: 2,
                yAxisIndex: 2,
                symbol: "rect",
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                  },
                },
                barWidth: 6,
                symbolRepeat: true,
                symbolSize: 14,
                data: lineData,
                barGap: "-100%",
                barCategoryGap: 0,
                label: {
                  normal: {
                    show: true,
                    formatter: (series) => {
                      return (
                        thisYearData[timeLineData[0]][series.dataIndex] +
                        "%" +
                        "  " +
                        thisYearData[timeLineData2[0]][series.dataIndex] +
                        "次  " +
                        thisYearData[timeLineData3[0]][series.dataIndex] +
                        "箱"
                      );
                    },
                    position: "insideLeft",
                    textStyle: {
                      color: "#ffffff",
                      fontSize: fontSize.fontSize(0.084),
                    },
                    offset: [0, -fontSize.fontSize(0.1)],
                  },
                },
                z: -100,
                animationEasing: "elasticOut",
                animationDelay: function (dataIndex, params) {
                  return params.index * 30;
                },
              },
              {
                name: "手动(追加)",
                type: "bar",
                xAxisIndex: 2,
                yAxisIndex: 2,
                //   symbol: 'rect',
                barWidth: 6,
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 5, 5, 0],
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "rgba(45, 134, 255,0.8)" },
                        { offset: 1, color: "rgba(83, 196, 255,0.8)" },
                      ]
                    ),
                  },
                },
                // symbolRepeat: true,
                // symbolSize: 14,
                data: thisYearData[timeLineData[0]],
                // animationEasing: 'elasticOut',
                // animationDelay: function (dataIndex, params) {
                //     return params.index * 30 * 1.1;
                // }
              },
            ],
          });
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        } catch (e) {
          console.log(e);
          // 错误处理代码片段
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>